<template>
	<view class="currentPage">
		<navbar title='账号注册' :isOpacity='true' :opacity='0.5' :isBack='true' :isFixed='true' style="color: #000000;">
		</navbar>
		<view class="header">输入邮箱地址</view>
		<!-- <view class="user-text">用户协议</view> -->
		<view class="input">
			<input type="text" value="" v-model="mail" placeholder="输入你的电子邮件地址" />
		</view>
		<view class="input">
			<input type="text" value="" v-model="verifyCode" placeholder="输入你的验证码" maxlength="5" />
		</view>
		<view class="input">
			<input type="text" value="" v-model="password" placeholder="输入你的密码" maxlength="16" />
		</view>
		<view class="input">
			<input type="text" value="" v-model="re_password" placeholder="重复你的密码" maxlength="16" />
		</view>
		<button type="primary" @tap='sendVerifyCode'>发送验证码</button>
		<button type="primary" @tap='register'>注册</button>

		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mail: '1358503971@qq.com',
				// mail:"",
				verifyCode: "",
				password: "1",
				re_password: "1"
			};
		},
		watch: {
			re_password: function(val) {
				if (val != this.password) {
					this.$refs.uToast.show({
						title: '密码不一致',
						type: 'error',
						position: "top"
					})
				}
			}
		},
		methods: {
			//获取验证码
			sendVerifyCode() {
				
					let  reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
					if(reg.test(this.mail)){
						this.$api.verify_code(`?mail=${this.mail}`).then(res => {
							console.log(res)
							if (res.data.code == 1) {
								this.$refs.uToast.show({
									title: '验证码已发送，请注意查收',
									type: 'success',
									position: "top"
								})
							} else {
								this.$refs.uToast.show({
									title: res.data.msg,
									type: 'error',
									position: "top"
								})
							}
						})
					}else{
						this.$refs.uToast.show({
							title: '邮箱格式不正确',
							type: 'error',
							position: "top"
						})
					}
				

				
			},
			// 注册
			register() {
				if (this.re_password != this.password) {
					this.$refs.uToast.show({
						title: '两次密码不一致,请检查',
						type: 'error',
						position: "top"
					})
					return
				}
				if(this.verifyCode == ""){
					this.$refs.uToast.show({
						title: '请输入验证码',
						type: 'error',
						position: "top"
					})
					return
				}
				let obj={
					mail:this.mail,
					password:this.password,
					verifyCode:this.verifyCode
				}
				this.$api.register(obj).then(res=>{
					console.log(res)
					if(res.data.msg == '注册成功'){
						this.$refs.uToast.show({
							title:res.data.msg+'，为你跳转登录页' ,
							position: "top",
							type: 'success',
							url:`pages/login/login`
						})
					
						uni.setStorageSync('user',this.mail)
						uni.setStorageSync('password',this.password)
					}else{
						this.$refs.uToast.show({
							title:res.data.msg ,
							position: "top",
							type: 'error'
						})
					}
					
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.header {
		font-size: 50rpx;
		padding: 40rpx 0 20rpx 40rpx;
	}

	.user-text {
		padding: 0 40rpx;
	}

	.input {
		input {
			font-size: 32rpx;
			border-bottom: 1px solid gray;
			padding: 40rpx;
			margin: 0 40rpx;
		}
	}

	button {
		width: 80%;
		margin-top: 80rpx;
		  background: linear-gradient(to right, #ff9569 0%, #e92758 100%);
	}
	.currentPage{
		 background: linear-gradient(to right, #f6d365 0%, #fda085 180%);
		 height: 100vh;
		 padding-top: 150rpx;
		 opacity: .8;
	}
</style>
